mixin move-unfold({cover, display, imgs, bg, moveto})
  -var {url: coverUrl, width: coverWidth, height: coverHeight} = images[cover]
  -var {url: displayUrl, width: displayWidth, height: displayHeight} = images[display]
  -var bgImg = (!!bg || bg == 0) ? images[bg] : images[imgs[0]]
  -var {url: bgUrl, width: bgWidth, height: bgHeight} = bgImg
  -var ratio = (images[imgs[0]].height + coverHeight) / coverHeight * 100

  section(style=`box-sizing:border-box;font-style:normal;font-weight:400;text-align:justify;font-size:16px;visibility:visible`, data-mpa-powered-by=`yiban.io`)
    // 需要调整margin-top 控制与其他section的距离
    section(style=`text-align:center;margin:0 0 -3px;box-sizing:border-box`)
      section(style=`display:inline-block;width:100%;vertical-align:top;overflow:hidden;align-self:flex-start;font-family:"box-sizing:border-box`)

        section(style=`height:0;overflow:visible;box-sizing:border-box`)
          section(style=`text-align:justify;justify-content:flex-start;display:flex;flex-flow:row nowrap;box-sizing:border-box`)
            section(style=`display:inline-block;width:100%;vertical-align:top;align-self:flex-start;flex:0 0 auto;box-sizing:border-box`)
              // ################### display moving background-image
              section(style=`text-align:center;line-height:0;box-sizing:border-box`)
                section(style=`max-width:100%;vertical-align:middle;display:inline-block;line-height:0;width:100%;box-sizing:border-box`)
                  svg(xmlns=`http://www.w3.org/2000/svg`, width=`100%`, height=`100%`, style=`transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);box-sizing:border-box`, 
                  viewBox=`0  0 ${displayWidth} ${displayHeight}`)
                    svg(style=`overflow:initial;box-sizing:border-box`)
                      foreignObject(height=`100%`, style=`background-position:center center;background-repeat:no-repeat;background-size:cover;background-image:url("${displayUrl}");box-sizing:border-box`, width=`100%`)

              section(style=`text-align:left;justify-content:flex-start;display:flex;flex-flow:row nowrap;box-sizing:border-box;margin-top:-2px`)
                section(style=`display:inline-block;vertical-align:top;width:100%;align-self:flex-start;flex:0 0 auto;height:auto;margin:0 -100.0005% 0 0;z-index:10;box-sizing:border-box`)
                  section(style=`justify-content:flex-start;display:flex;flex-flow:row nowrap;box-sizing:border-box`)
                    section(style=`display:inline-block;vertical-align:top;width:100%;align-self:flex-start;flex:0 0 auto;height:auto;margin:0 -100.0005% 0 0;z-index:10;box-sizing:border-box`)
                      section(style=`display:inline-block;width:100%;vertical-align:top;overflow-x:overlay;scroll-snap-type:x mandatory;white-space:nowrap;perspective:50px;box-sizing:border-box`)

                        for idx in imgs
                          -var {url, width, height} = images[idx]
                          // ################### slide-part
                          section(style=`display:inline-block;vertical-align:middle;width:99.9999%;scroll-snap-align:center;white-space:normal;overflow:hidden;max-width:99.9999%!important;box-sizing:border-box`)
                            section(style=`text-align:center;line-height:0;box-sizing:border-box`)
                              section(style=`max-width:100%;vertical-align:middle;display:inline-block;line-height:0;width:100%;box-sizing:border-box`)
                                svg(xmlns=`http://www.w3.org/2000/svg`, width=`100%`, height=`100%`, 
                                  style=`transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);box-sizing:border-box`, 
                                  viewBox=`0  0 ${width} ${height}`)
                                  svg(style=`overflow:initial;box-sizing:border-box`)
                                    foreignObject(height=`100%`, style=`background-position:center center;background-repeat:no-repeat;background-size:cover;background-image:url("${url}");box-sizing:border-box`, width=`100%`)

                section(style=`display:inline-block;vertical-align:top;width:100%;align-self:flex-start;flex:0 0 auto;height:auto;box-sizing:border-box`)
                  section(style=`text-align:center;line-height:0;box-sizing:border-box`)
                    section(style=`max-width:100%;vertical-align:middle;display:inline-block;line-height:0;width:100%;box-sizing:border-box`)
                      // ################### slide-part-background
                      svg(xmlns=`http://www.w3.org/2000/svg`, width=`100%`, height=`100%`, style=`transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);box-sizing:border-box`, 
                      viewBox=`0  0 ${bgWidth} ${bgHeight}`)
                        svg(style=`overflow:initial;box-sizing:border-box`)
                          foreignObject(height=`100%`, style=`background-position:center center;background-repeat:no-repeat;background-size:cover;background-image:url("${bgUrl}");box-sizing:border-box`, width=`100%`)

        section(style=`overflow:visible;box-sizing:border-box`)
          section(style=`display:block;width:100%;height:auto;box-sizing:border-box`)
            // ########################### fix the gap in each block
            section(style=`display:block;pointer-events:none;box-sizing:border-box; margin-top: -5px`)
              svg(width=`100%`, xmlns=`http://www.w3.org/2000/svg`, 
                style=`box-sizing:border-box;transform:rotateZ(0);-webkit-transform:rotateZ(0);-moz-transform:rotateZ(0);-o-transform:rotateZ(0);display:block;max-width:none!important;pointer-events:none;width:100%`,
                opacity=`1`, viewBox=`0 0 ${coverWidth} ${coverHeight}`)

                svg(width=`100%`, height=`100%`, style=`box-sizing:border-box`)
                  svg(width=`100%`, height=`100%`, style=`box-sizing:border-box`)
                    rect(fill=`transparent`, width=`100%`, height=`100%`, style=`box-sizing:border-box`, x=`0%`, y=`0%`)
                  rect(style=`pointer-events:auto;opacity:0;box-sizing:border-box`, width=`100%`, height=`100%`)
                    animate(from=`0`, to=`0`, dur=`0`, begin=`touchmove + 0.1s`, fill=`freeze`, attributeName=`width`, style=`box-sizing:border-box`)
                  // ################### cover
                  svg(style=`box-sizing:border-box`)
                    foreignObject(width=`100%`, height=`100%`, x=`0`, y=`0`, style=`box-sizing:border-box`)
                      svg(space=`default`, style=`display:block;width:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;background-attachment:scroll;
                      -webkit-tap-highlight-color:transparent;visibility:visible;pointer-events:none;background-image:url("${coverUrl}");
                      box-sizing:border-box;user-select:none`, viewBox=`0 0 ${coverWidth} ${coverHeight}`, xlink=`http://www.w3.org/1999/xlink`, xmlns=`http://www.w3.org/2000/svg`)
                  animate(style=`box-sizing:border-box`, fill=`freeze`, attributeName=`x`, begin=`0s`, from=`0%`, to=`0%`, dur=`0`)
                  animate(style=`box-sizing:border-box`, fill=`freeze`, attributeName=`x`, begin=`touchmove`, dur=`1500`, restart=`never`, keyTimes=`0;0.0005;1`, 
                    values=`${moveto != 'right' ? '0%;-100%;-100%' : '0%;100%;100%'}`)
                animate(style=`box-sizing:border-box`, fill=`freeze`, attributeName=`width`, begin=`touchmove + 0.8s`, dur=`2`, restart=`never`, from=`100%`, to=`${ratio}%`)
